<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/index.css">
</head>

<body>
    <div class="container" >
        <div class="row">
            <div class="col-sm">

            </div>

            <div class="col-sm">
                <div class="card" style="width: 50rem;">
                    <!-- 头部 -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-4 d-flex justify-content-start">
                                <button type="button" class="btn btn-info btn-sm shadow" style="width: 5rem;height: 2rem;margin-top: 1rem;" data-toggle="modal"
                                    data-target="#saysomething">发表说说</button>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-center">
                                <p style="margin-top: 1.5rem;">当前用户：XXXXX</p>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-end">
                                <button type="button" class="btn btn-info btn-sm shadow"  style="width: 3rem;height: 2rem;margin-top: 1rem;">注销</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card" style="width: 50rem;">

                    <!-- 内容 -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm"  style="border-radius:0.5rem;background-color: snow; margin-left: 1rem;">
                                <p style="margin-top: 1rem;"></p>
                                <p style="margin-top: 1rem;"></p>
                                <p style="margin-top: 3rem;">趁现在还有等待</p>
                                <p style="margin-top: 1rem;"></p>
                                <p style="margin-top: 1rem;"></p>
                            </div>
                            
                            <div class="col-sm-1" style="margin-top: 0.5rem;">
                                <button type="button" class="btn btn-info btn-sm shadow" data-toggle="modal"
                                    data-target="#comment" style="margin-left: 1.7rem;">吐槽一下</button>
                            </div>

                            <!-- <div class="col-sm-10">
                                <div class="alert alert-success w-auto" role="alert">今天看了部电影，我的姐姐，挺好看的。。。。。</div>
                            </div> -->
                        </div>
                    </div>
                    
                    <!-- 评论 -->
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <blockquote class="blockquote mb-0" >
                                    <p>我去，看电影也不带我去。。。 </p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">胡晓光</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">张无忌</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                            <li class="list-group-item" >
                                <blockquote class="blockquote mb-0">
                                    <p>兄弟太不够意思了。。。。</p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">张明敏</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">张无忌</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                            <li class="list-group-item" >
                                <blockquote class="blockquote mb-0">
                                    <p>太过分了。。。。</p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">赵敏</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">张无忌</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                            <li class="list-group-item">
                                <blockquote class="blockquote mb-0">
                                    <p>姐姐，太不够意思了哈，补上补上。。。 </p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">邓超</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">张无忌</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm">

            </div>
        </div>

        <!-- 发表说说  -->
        <div class="modal fade" id="saysomething" data-backdrop="static" data-keyboard="false" tabindex="-1"
            aria-labelledby="saysomethingLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="saysomethingLabel">发表内容</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">说点想说的...</label>
                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success">确认发表</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 吐槽一下 -->
        <div class="modal fade" id="comment" data-backdrop="static" data-keyboard="false" tabindex="-1"
            aria-labelledby="commentLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="commentLabel">发表说说内容</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">说点想说的...</label>
                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success">确认发表</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../static/js/jquery-3.5.1.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>

    <script>
        function logout(){
            axios({
                    method: 'post',
                    url: '/logout'
                }).then(function (response) {
                    
                    let res=response.data;
                    if(res.code===200){
                        window.location.href='/login';
                    }
                }).catch((err) => {
                    
                });
        }
    </script>
</body>

</html>